﻿@{
    ViewBag.Title = "商品管理--编辑商品";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/Content/js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<link href="~/Content/js/simditor/css/simditor.css" rel="stylesheet" />
<script src="~/Content/js/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<script src="~/Content/js/simditor/js/module.min.js"></script>
<script src="~/Content/js/simditor/js/hotkeys.min.js"></script>
<script src="~/Content/js/simditor/js/uploader.min.js"></script>
<script src="~/Content/js/simditor/js/simditor.min.js"></script>

<link href="~/Content/css/gray/easyui.css" rel="stylesheet" type="text/css" />
<!--商品分类下拉树多选控件-->
@*<script src="~/Content/js/jquery/jquery.easyui.plus.js" type="text/javascript"></script>
<script src="~/Content/js/jquery/jquery.easyui.min.js" type="text/javascript"></script>*@

<!--商品规格-->
@*<script src="~/Content/js/jquery/product-sku-jquery.js" type="text/javascript"></script>*@
@*<!--省市区-->
<link href="~/Content/js/Areajs/css/city-picker.css" rel="stylesheet" type="text/css" />*@

<style>
    /*商品规格*/
    #contetSKUs h2 {
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        line-height: 30px;
        margin: 10px 0 10px 45px;
        width: 85%;
    }
     #AttributeContent {
        list-style-type: none;
    }

    #AttributeContent li {
        line-height: 30px;
        vertical-align: middle;
    }

        #AttributeContent li input {
            margin-right: 5px;
        }

    #AttributeContent li {
        float: left;
        width: 150px;
        display: block;
    }
     /*商品图片*/
    .img-square{
      border: 1px solid red;
    }
    .closeLayer{
    /*display: none;*/
    z-index: 99;
    position:absolute; /*绝对定位*/

    left:148px; /*位置自己看着调整，在图片上方*/

    top:-2px; 

    /*border: 1px solid red;*/
    }
    /*文本编辑器高度*/
    .simditor .simditor-body , .editor-style{
      min-height:450px;
    }
    input
    {
        min-width:10px;
    }
</style>
<form id="form1">
      <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">基本信息</a></li>
            <li role="presentation" ><a href="#message" id="href1">详细介绍</a></li>
            @*<li role="presentation" ><a href="#guige" id="href2">规格</a></li>*@
       </ul>
  <div class="tab-content">
    <div role="tabpanel" style="margin-right: 20px;" class="tab-pane active" id="home">
        <table class="form">
               
             @*  <tr>
            <th class="formTitle">商品分类</th>
            <td class="formValue" colspan="3" >
                <input id="F_category" name="F_category" class="form-control  required"/> <span>（可多选）</span>
            </td>
        </tr>
      <tr id="trShopCate">
        <th class="formTitle">店铺商品分类</th>
        <td class="formValue" colspan="3">
             <input id="F_ShopCategory" name="F_ShopCategory" class="easyui-combobox form-control" />  <span>（必填）</span>
        </td>
    </tr>*@
            <tr>
                <th class="formTitle">商品名称</th>
                <td class="formValue" colspan="3">
                    <input id="F_Province" name="F_Province" class="form-control" type="hidden">
                    <input id="F_Supplier" name="F_Supplier" type="hidden" />
                    <input id="Old_Image" name="Old_Image" type="hidden" />
                    <input type="hidden" id="NotMapped_cate" name="NotMapped_cate" />
                    <input id="F_ProductName" name="F_ProductName" type="text" class="form-control required" placeholder="请输入商品名称" />
                </td>
            </tr>
              @*<tr>
            <th class="formTitle">商品类型</th>
            <td class="formValue">

                <input type="hidden" id="productID"  />
                <select id="F_TypeId" name="F_TypeId" class="form-control">
                    <option value="">==请选择==</option>
                </select>
                </td>
                 <th class="formTitle">品牌</th>
                 <td class="formValue">
                 <select id="F_BrandId" name="F_BrandId" class="form-control">
                    <option value="">==请选择==</option>
                </select>
            </td>
        </tr>
    <tr>
        <th></th>
        <td colspan="3">
               <table id="tableAttribute"  style="width:98%;">
             </table>
        </td>
    </tr>*@
              <tr>
                <th class="formTitle">商品编码</th>
                <td class="formValue">
                    <input id="F_ProductCode" name="F_ProductCode" type="text" class="form-control required"   placeholder="请输入商品编码"  />
                </td>
                    <th class="formTitle">商品库存</th>
                <td class="formValue">
                    <input id="productStock" name="productStock" type="text" class="form-control required number"  placeholder="请输入商品库存"/>
                </td>
                   
            </tr>
              <tr>
                <th class="formTitle">销售价</th>
                <td class="formValue">
                    <input id="F_Price" name="F_Price " type="text" class="form-control number" placeholder="请输入销售价"/>
                </td>
                 <th class="formTitle">计量单位</th>
                <td class="formValue">
                    <input id="F_Unit" name="F_Unit" type="text" class="form-control" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">市场价</th>
                <td class="formValue">
                    <input id="F_MarketPrice" name="F_MarketPrice " type="text" class="form-control number" />
                </td>
                <th class="formTitle">成本价</th>
                <td class="formValue">
                    <input id="F_LowestPrice" name="F_LowestPrice" type="text" class="form-control number" />
                </td>
            </tr>
           @*  <tr>
                 <th class="formTitle">所在城市</th>
                <td class="formValue" colspan="3">
                   <div style="position: relative; " >
					<input id="city-picker3" class="form-control" readonly type="text"   data-toggle="city-picker" >
				</div>
                </td>
               
            </tr>*@
            <tr>
                <th class="formTitle">促销价</th>
                <td class="formValue">
                    <input id="F_PromotionPrice" name="F_PromotionPrice " type="text" class="form-control number"/>
                </td>
                <th class="formTitle">是否促销</th>
                <td class="formValue">
                    <div class="ckbox">
                        <input id="F_Promotion" name="F_Promotion" type="checkbox"><label for="F_Promotion">是</label>
                    </div>
                </td>
            </tr>
            
             <tr>
                      <th class="formTitle">显示排序</th>
                <td class="formValue">
                    <input id="F_SortCode" name="F_SortCode" type="text" class="form-control required digits"  placeholder="请输入显示顺序"/>
                </td>
               
                  <th class="formTitle">是否上架</th>
                <td class="formValue" >  
                    <div class="ckbox"> 
                        <input id="F_EnabledMark" name="F_EnabledMark" type="checkbox" checked="checked"><label for="F_EnabledMark">是</label>
                    </div>
                </td>
            </tr>
            <tr>
                <th class="formTitle">商品图片</th>
                <td class="formValue" colspan="3">
                    <input id="file_upload" name="file_upload" type="file" multiple="multiple"/>
                    
                        <input type="hidden" id="NotMapped_Images" name="NotMapped_Images" />
                    <input id="F_ImageUrl" name="F_ImageUrl" type="hidden"/>
                    <input id="F_ImageUrl1" name="F_ImageUrl1" type="hidden"/>
                    <input id="F_ImageUrl2" name="F_ImageUrl2" type="hidden"/>
                    <input id="F_ImageUrl3" name="F_ImageUrl3" type="hidden"/>
                    <input id="F_ImageUrl4" name="F_ImageUrl4" type="hidden"/>
                </td>
            </tr>
            <tr>
                <th class="formTitle"></th>
                <td class="formValue"  colspan="3" id="tdImage">
                    <div class="row">
                      <div class="col-xs-2" >
                        <img src="/Content/img/imgdefalt.jpg" width="150" height="150" id="pic_view" class="a" />
                           <div class="closeLayer"   id="div0" onClick="javascript:delcfm(0)" href="#" hidden >
                                    <img  src="~/Content/img/delete.gif" >
                           </div>
                      </div>
                     <div class="col-xs-2" style="margin-left:20px">
                         <img src="/Content/img/imgdefalt.jpg" width="150" height="150" id="pic_view1" class="a" />
                         <div class="closeLayer"  onClick="delcfm(1)" href="#" id="div1" hidden>
                                    <img  src="~/Content/img/delete.gif">
                           </div>
                     </div> 
                     <div class="col-xs-2"  style="margin-left:20px">
                         <img src="/Content/img/imgdefalt.jpg" width="150" height="150" id="pic_view2" class="a"/>
                          <div class="closeLayer"  onClick="delcfm(2)" href="#" id="div2" hidden>
                                        <img  src="~/Content/img/delete.gif">
                         </div>
                       </div>  
                      <div class="col-xs-2"  style="margin-left:20px">
                             <img src="/Content/img/imgdefalt.jpg" width="150" height="150" id="pic_view3" class="a"/> 
                              <div class="closeLayer"  onClick="delcfm(3)" href="#" id="div3" hidden>
                                            <img  src="~/Content/img/delete.gif">
                                   </div> 
                       </div>
                         <div class="col-xs-2"  style="margin-left:20px">
                             <img src="/Content/img/imgdefalt.jpg" width="150" height="150" id="pic_view4" class="a"/> 
                              <div class="closeLayer"  onClick="delcfm(4)" href="#" id="div4" hidden>
                                            <img  src="~/Content/img/delete.gif">
                             </div>
                        </div>
                    </div>
                </td>
            </tr>
           
        </table>
    </div>
      
    <div role="tabpanel" style="margin-right: 20px;height:550px" class="tab-pane " id="message" >
         <table class="form" >
          <tr >
                <th class="formTitle" valign="top" style="padding-top: 5px;">
                    描述
                </th>
                <td class="formValue" >
                    <textarea id="F_Description" name="F_Description" class="form-control" ></textarea>
                </td>
            </tr>
        </table>
    </div>
    <div role="tabpanel" style="margin-right: 20px;" class="tab-pane" id="guige">
    <input type="hidden" id="hfCurrentBaseProductSKUs" name="hfCurrentBaseProductSKUs" value="" />
        <table  class="form"  style="margin:20px">
            <tr id="trbtnOpenSKUs">
                <td class="tdbg">
                  <input id="btnOpenSKUs" type="button" class="adminsubmit_short" value="开启规格"/>
                </td>
            </tr>
            <tr class="SKUsTR">
               
                <td id="contetSKUs" colspan="2"></td>
            </tr>

        </table>
    </div>
  </div>
</form>
<script type="text/javascript">
    var editor;
    var keyValue = $.request("keyValue");
    //修改之前 商品其他图片集合
    var oldImagesList;
    $(function () {
        editor = new Simditor({
            textarea: $('#F_Description'),
            toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'],
            upload: {
                url: '/ProductManage/Product/EditorUpload', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
            }
        });
        editor.Width = 1000;
        //initControl(); 
        if (!!keyValue) {
            
            $.ajax({
                url: "/ProductManage/Product/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                cache: false,
                async: false,
                success: function (data) {
                    $("#form1").formSerialize(data);
                    editor.setValue(data["F_Description"]);
                   
                  /*  //绑定商城商品分类
                    if (data.NotMapped_cate != null&&data.NotMapped_cate != "") {
                        //默认选中 
                        $('#F_category').combotree('setValues', data.NotMapped_cate.split(','));
                    }*/
                    ////店铺商品分类默认选中 
                    //$('#F_ShopCategory').combobox('setValue', data["F_ShopCategory"]);
                    //设置商品属性值
                    //if (data.attrList != null) {
                    //    for (var b = 0; b < data.attrList.length; b++) {
                    //        var productAttr = data.attrList[b];
                    //        //属性tr
                    //        var curAttrTr = $("#tableAttribute tr[id='" + productAttr.F_AttributeId + "']");
                    //        if (curAttrTr.attr("name") == 0)//单选
                    //        {
                    //            if (productAttr.F_ValueId != null)
                    //                curAttrTr.find("input[type='radio'][value='" + productAttr.F_ValueId + "']").attr('checked', 'checked');
                    //        } else if (curAttrTr.attr("name") == 1)//多选
                    //        {
                    //            curAttrTr.find("input:checkbox[value='" + productAttr.F_ValueId + "']").attr('checked', 'true');
                    //        } else if (curAttrTr.attr("name") == 2)//自定义
                    //        {
                    //            curAttrTr.find("input[type='text']").val(productAttr.F_ValueId);
                    //        }
                    //    }
                    //}
                    //设置商品图片
                    if (data.F_ImageUrl != null && data.F_ImageUrl != "") {
                        $("#pic_view").attr("src", data.F_ImageUrl);
                        $("#div0").show();
                    }
                    //商品其他图片
                    oldImagesList = data.NotMapped_ImagesUrl;
                    if (oldImagesList != null) {
                        $.each(oldImagesList, function (n, value) {
                            $("#pic_view" + (n + 1)).attr("src", value);
                            $("#F_ImageUrl" + (n + 1)).val(value);
                            $("#div" + (n + 1)).show();
                        }
                        );
                    }
                    $("#productID").val(data.F_Id);
                    ////如果存在规格信息，则加载规格信息
                    //if (data.SkuItemCount > 0) {
                    //    GeneratedSpecification(data.F_TypeId);
                    //    $("#btnOpenSKUs").hide();
                    //}
                }
            });
        }
        //添加界面的附件管理
        $('#file_upload').uploadify({
            'swf': '/Content/js/uploadify/uploadify.swf',  //FLash文件路径
            'buttonText': '浏  览',                                 //按钮文本
            'uploader': '/ProductManage/Product/Upload',                       //处理文件上传Action
            'queueSizeLimit': 10,                          //队列最多可上传文件数量，默认为999
            'auto': true,                                 //选择文件后是否自动上传，默认为true
            'multi': true,                                 //是否为多选，默认为true
            'removeCompleted': true,                       //是否完成后移除序列，默认为true
            'fileSizeLimit': '10MB',                       //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
            'fileTypeDesc': 'Image Files',                 //文件描述
            'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp',  //上传的文件后缀过滤器
            'onQueueComplete': function (event, data) {                 //所有队列完成后事件

            },
            'onUploadStart': function (file) {
                $("#file_upload").uploadify("settings", 'formData', { 'folder': 'Product' }); //动态传参数
            },
            'onUploadError': function (event, queueId, fileObj, errorObj) {
                //alert(errorObj.type + "：" + errorObj.info);
            },
            'onUploadSuccess': function (file, data, response) {
                var arr = data.split('{');
                $("#tdImage img[class='a']").each(function (index) {
                    if ($(this).attr("src") == "/Content/img/imgdefalt.jpg") {
                        $(this).attr("src", "/UploadFiles/temp/" + arr[0]);
                        $("#div" + index).show();
                        if (index == 0)
                            $("#F_ImageUrl").val(arr[0]);
                        else
                            $("#F_ImageUrl" + index).val(arr[0]);
                        return false;
                    }
                });
            }
        });

        ////启用规格
        //$("#btnOpenSKUs").click(function () {
        //    $(this).hide();

        //    LoadSKUs($("#F_TypeId").val());
        //});
        $('#href1,#href2').click(function (e) {
            if($(".nav-tabs li:first").hasClass("active"))
            {
               /* if ($("#F_category").combotree('getValues') == "") {
                    $.modalAlert("请选择商品分类！", "error");
                    e.preventDefault();//阻止a链接的跳转行为 
                    return false;
                }*/
                if (!$('#form1').formValid()) {
                    e.preventDefault();//阻止a链接的跳转行为 
                } else {
                    $(this).tab('show');//显示当前选中的链接及关联的content 
                }
            }else{
                $(this).tab('show');//显示当前选中的链接及关联的content 
            }
        })
    });


    //删除上传的图片
    function delcfm(index) {
        if (index == 0) {
            $("#pic_view").attr("src", "/Content/img/imgdefalt.jpg");
            $("#F_ImageUrl").val("");
        }
        else {
            $("#pic_view" + index).attr("src", "/Content/img/imgdefalt.jpg");
            $("#F_ImageUrl" + index).val("");
        }
        $("#div" + index).hide();
    }
    @* function initControl() {
        //加载商品类型
          $("#F_TypeId").bindSelect({
            url: "/ProductManage/Product/GetTypeJson",
            id: "F_Id",
            text: "F_TypeName",
            change: function (e) {
                //$.modalConfirm("注：切换商品类型将会导致已经编辑的品牌、属性和规格数据丢失，确定要切换吗？", function (r) {
                //  if (r) {
                //绑定品牌
               $("#F_BrandId").empty();
                $("#F_BrandId").bindSelect({
                    url: "/ProductManage/Product/GetBrandJson",
                    param: { pID: $("#F_TypeId").val() }
                });
                //绑定属性
                getAttribute();
                //刷新商品类型的规格
                if ($("#btnOpenSKUs").css("display") == "none") {
                    $("#btnOpenSKUs").click();
                }
                //    }
                //});
            }
        }); 
      /*  //加载商城商品分类
        $("#F_category").combotree({
            url: "/Product/GetCombotreeJson?flag=0",
            multiple: true,
            cascadeCheck: false, //禁止联动选择,
            width: 600,
            height: 33
            //required: true,
            //missingMessage:"必填字段"
        });*/
      /*  if (@NFine.Code.OperatorProvider.Provider.GetCurrent().UserType == 0) {
            $("#trShopCate").hide();
        }else{
            //加载店铺商品分类
            $("#F_ShopCategory").combotree({
                url: "/Biz/Product/GetShopCombotreeJson",
                width: 600,
                height: 33
            });
        }*/
    }*@
    function submitForm() {
     /*   if ($("#F_category").combotree('getValues') == "") {
            $.modalAlert("请选择商城商品分类！", "error");
            return false;
        } */

        //if ( $("#trShopCate").is(":visible")&& $("#F_ShopCategory").combotree('getValues') == "") {
        //    $.modalAlert("请选择店铺商品分类！", "error");
        //    return false;
        //}
        if($(".nav-tabs li:first").hasClass("active"))
        {
            if (!$('#form1').formValid()) {
                return false;
            } 
        }
        /*if (!guigeValidate())
            return false;

        // 定义一个数组 保存属性及属性值
        var json = new Array();
        var attrValue;//属性值
        $("#tableAttribute tr").each(function (index) {
            var attributeID = $(this).attr("id");
            if ($(this).attr("name") == 0)//单选
            {
                attrValue = $(this).find("input[type='radio']:checked").val();
                if(attrValue!=null)
                    json.push({ "F_AttributeId": attributeID, "F_ValueId": attrValue });
            }
            else if ($(this).attr("name") == 2)//自定义
            {
                attrValue = $(this).find("input[type='text']").val();
                if(attrValue!="")
                   json.push({ "F_AttributeId": attributeID, "F_ValueId": attrValue });
            }
            else if ($(this).attr("name") == 1)//多选
            {
                $(this).find("input[type='checkbox']:checked").each(function () {
                    json.push({ "F_AttributeId": attributeID, "F_ValueId": $(this).val() });
                });
            }

        });
        var strJson = JSON.stringify(json);
        strJson = encodeURI(strJson);*/
        //商品图片路径
        var imageUrl = "";
        $("#tdImage img[class='a']").each(function (index) {
            if (index != 0) {
                if ($(this).attr("src") != "/Content/img/imgdefalt.jpg")
                    imageUrl += $("#F_ImageUrl" + index).val() + ",";
                else
                    imageUrl += "" + ",";
            }
        });
        $("#NotMapped_Images").val(imageUrl);
      /*  //商城商品分类
        $("#NotMapped_cate").val($("#F_category").combotree('getValues')); */
        ////店铺商品分类
        //$("#F_ShopCategory").val($("#F_ShopCategory").combotree('getValue'));
       /* //规格
        var selectedSku = GetSelectedSKU();
        if (selectedSku && selectedSku != 'undefined') {
            $("#hfCurrentBaseProductSKUs").val(JSON.stringify(selectedSku));
        }*/
        var str_oldImage = oldImagesList == null ? "" : JSON.stringify(oldImagesList);
  
        $.submitForm({
            url: "/ProductManage/Product/SubmitForm?keyValue=" + keyValue + "&imageType=Product&oldImages=" + str_oldImage,
            param: $("#form1").formSerialize(),
            success: function () {
                //  $.currentWindow().$("#gridList").resetSelection();
                $.currentWindow().$("#gridList").trigger("reloadGrid");
                $.currentWindow().$(".toolbar .operate").find('.close').click();
            }
        })
    }
   /* //根据商品类型获取属性
    function getAttribute() {
        $('#tableAttribute tr').remove();
        $.ajax({
            async: false,
            url: "/ProductManage/Product/GetAttribute",
            data: { typeID: $('#F_TypeId').val(), usage: 0 },
            dataType: "json",
            type: "post",
            success: function (data) {
                var showtype = "radio";
                //循环显示属性
                for (var i = 0; i < data.length; i++) {
                    var model = data[i];
                    var row = '<tr id="' + model.F_Id + '" style="border-bottom:1px solid rgb(191,191,191); height:40px" name=' + model.F_UsageMode + '>';
                    row += '<td style="border:none;width:10%;text-align:right">' + model.F_AttributeName + '：</td>';
                    row += "<td style='text-align:left;'>";

                    if (model.F_UsageMode == 2) //自定义填写
                    {
                        row += "<input class='form-control' style='margin-left:10px;width:200px' type='text' />";
                    } else {
                        if (model.F_UsageMode == 1) //多选
                            showtype = "checkbox";
                        for (var j = 0; j < model.valueList.length; j++) {
                            var attrValue = model.valueList[j];
                            row += "<input style='margin-left:10px' type='" + showtype + "' name='" + showtype + i + "'  value='" + attrValue.F_Id + "'/>&nbsp;&nbsp;" + attrValue.F_ValueStr;
                        }
                    }
                    row += "</td></tr>";
                    $("#tableAttribute").append(row);
                }
            }
        });

    }*/
    /* //验证规格
    function guigeValidate() {
        var flag_skuCode = false;
        var flag_SalePrice = false;
        var flag_Stock = false;
        $(".GridViewStyle tr td :input").each(function (index) {
            if ($(this).attr('id') == "F_Sku") {
                if (!$(this).val()) {
                    flag_skuCode = true;
                    return false;
                }
            }
            if ($(this).attr('id') == "F_SalePrice") {
                if (!$(this).val()) {
                    flag_SalePrice = true;
                    return false;
                }
            }
            if ($(this).attr('id') == "F_Stock") {
                if (!$(this).val()) {
                    flag_Stock = true;
                    return false;
                }
            }
        });
        if (flag_skuCode) {
            $.modalAlert("开启的规格中的商品编码不能为空！", "error");
            return false;
        }
        if (flag_SalePrice) {
            $.modalAlert("开启的规格中的销售价不能为空！", "error");
            return false;
        }
        if (flag_Stock) {
            $.modalAlert("开启的规格中的库存数量不能为空！", "error");
            return false;
        }
        return true;
    }*/

</script>

@*<script src="~/Content/js/Areajs/city-picker.data.js"  type="text/javascript"></script>
<script src="~/Content/js/Areajs/city-picker.js"  type="text/javascript"></script>*@

